// 获取数据
$(function () {

  const layer = layui.layer
  const form = layui.form
  const laypage = layui.laypage


  const q = {
    advposdesc: '',
    advposname: '',
    page: 1,
    limit: 5,
  }

  render()
  function render() {
    // 获取数据  渲染到页面
    axios.get('/ydd_advpos/list', q).then(({ data, errmsg, errno }) => {
      // console.log(data.data);
      // console.log(errno);
      if (data.errno !== 0) return layer.msg(errmsg)
      const str = data.data.data.map(({ id, advposname, advposdesc, advpossize, advposnum }) => {
        return `
        <tr>
          <td>${id}</td>
          <td>${advposname}</td>
          <td>${advposdesc}</td>
          <td>${advposnum}</td>
          <td>${advpossize}</td>
          <td>
            <button type="button" class="layui-btn layui-btn-radius layui-btn-norma" id='alter'data-id=${id}>
            <i class="layui-icon layui-icon-edit">修改  </i>
            </button>

            <button type="button"  class="layui-btn layui-btn-danger layui-btn-radius layui-btn-norma"" id='del'data-id=${id}>
            <i class="layui-icon layui-icon-delete">删除</i>
            </button>
          </td>
        </tr>
        `
      }).join('')
      // console.log(str);
      $('#tb').html(str)


      renderPage(data.total)

    })
  }


  // 新增弹出层
  let layerIndex = null
  $('body').on('click', '#add', function (e) {
    e.preventDefault()
    // console.log(1)
    layerIndex = layer.open({
      type: 1,
      title: '添加广告位',
      area: ['750px', '350px'],
      content: $('#addCateTpl').html()
    })
  })


  // 新增效果
  $('body').on('submit', '#form-add', function (e) {
    e.preventDefault()
    const data = $(this).serialize()
    // console.log(data);
    axios.post('/ydd_advpos/add', data).then(res => {
      console.log(res);
      if (res.data.errno !== 0) return layer.msg('添加失败！')

      layer.msg('添加成功！')
      // 重新渲染
      render()
      layer.close(layerIndex)
    })

  })


  // 修改功能
  $('body').on('click', '#alter', function (e) {
    e.preventDefault()

    let id = $(this).attr('data-id')
    axios.post(`/ydd_advpos/rowInfo?id=${id}`).then(({ data }) => {
      // console.log(data);
      if (data.errno !== 0) return layer.msg(data.errmsg)
      form.val('formTest', data.data)
    })


    // 修改弹出层
    layerIndex = layer.open({
      type: 1,
      title: '修改广告位',
      area: ['750px', '300px'],
      content: $('#alterCateTpl').html()
    })
  })


  // 修改提交接口
  $('body').on('submit', '#form-alter', function (e) {
    e.preventDefault()
    const data = $(this).serialize()
    axios.post('/ydd_advpos/update', data).then(({ data }) => {
      console.log(data);
      if (data.errno !== 0) return layer.msg(data.errmsg)
      layer.msg('修改成功')
      render()
      layer.close(layerIndex)
    })

  })


  // 修改弹出层的取消按钮
  $('body').on('click', '.cancel', function () {
    layer.close(layerIndex)
  })


  // 删除按钮二次弹窗
  $('body').on('click', '#del', function () {
    const id = $(this).attr('data-id')
    const length = $('#delete').length

    layer.confirm('确定删除吗?', { icon: 3, title: '删除' }, function (index) {
      axios.get(`/ydd_advpos/del?id=${id}`).then(({ data }) => {
        if (data.errno !== 0) return layer.msg(data.errsg)
        layer.msg('删除成功！')
        if (length === 1 && q.page > 1) {
          q.pagenum -= 1
        }
        render()
      })
      layer.close(index);
    })
  })



  // 分页接口

  function renderPage(total) {
    laypage.render({
      //属性上是样式的设置
      elem: 'page-box',
      count: total,//总共多少条数据
      limit: q.limit,//每一页显示多少条数据
      curr: q.page,//当前接口请求是哪一页,这个是样式的设置,默认是第一个高亮
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
      limits: [1, 2, 3, 4],
      theme: '#1e9fff',
      // 功能需要调用jump回调
      jump: function (obj, first) {//render调用的时候会触发一次,当用户选择的时候会触发
        // console.log('obj',obj)//obj包含了当前分页的所有参数，比如：
        // console.log('first',first)
        q.page = obj.curr//点击哪一页就请求哪一页的数据
        q.limit = obj.limit//点击几条就一页显示几条数据,
        //首次不执行
        if (!first) {
          //do something
          // 调用渲染表格的方法
          // 注意:请求数据之前一定要修改查询参数q
          render()
        }
      }
    })
  }


  // // 广告名称搜索
  // $('#search').on("click", function (e) {
  //   const text = $('#input').val()
  //   if (!text) return layer.msg('请输入内容')
  //   q.advposname = text
  //   render()
  //   $('form')[0].reset()
  // })


  // //刷新按钮
  // $('#refresh').on('click', function () {
  //   $('#reload').click()
  // })
  // //搜索框隐藏
  // $('.toggle').on('click', function () {
  //   $('#selectForm').toggleClass('active')
  //   $('.toggle i').toggleClass('active')
  //   $('.toggle span').toggleClass('active')
  //   if ($('.toggle span').attr('class') == 'active') {
  //     $('.toggle span').html('打开搜索框')
  //   } else {
  //     $('.toggle span').html('关闭搜索框')
  //   }

  // })




  // //点击隐藏列
  // $('#menu').on('click', function () {
  //   $('.cate-Hide').toggleClass('active')

  // })

  // $('.cate-Hide').on('click', 'h1', function (event) {
  //   event.stopPropagation()
  //   let num = $(this).attr('data-num')
  //   $(`table td:nth-child(${num})`).toggleClass('active')
  //   $(`table th:nth-child(${num})`).toggleClass('active')
  //   $(this).children('i').eq(1).toggleClass('active1')
  //   $(this).children('span').toggleClass('active1')
  // })









})